<template>
    <el-dialog :model-value="showAddParentDialog" :title="props.editInfo.id ? '编辑分类' : '新建分类'" width="500"
        :before-close="resetForm" :close-on-click-modal="false">
        <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="auto">
            <el-form-item label="分类名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入一级分类名称" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" :loading="editLoading" @click="submitForm(ruleFormRef)">确认</el-button>
                <el-button @click="resetForm">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { operationCategory } from '@/api/questionbanklabel'
import { Plus } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'

import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { getcarmodellist } from '@/api/questionbank'

const categoryLogo = ref('')
const props = defineProps({
    showAddParentDialog: {
        type: Boolean
    },
    editInfo: {
        type: Object,
        default: () => {
            return {
                id: ''
            }
        }
    }
})


const ruleFormRef = ref<FormInstance>()

interface Form {
    name: string
    img: string
    parentId: number
    carIds: any
    categoryIds: string
    pageUrlType: string
    remark: { type: string }
}

const form = reactive({
    name: '',
    img: '',
    categoryIds: '',
    pageUrlType: '',
    carIds: [],
    parentId: 0,
    remark: { type: '0' },
    status: 1
})

const rules = reactive<FormRules<Form>>({
    name: [{ required: true, message: '不能为空', trigger: 'blur' }],
    // img: [{ required: true, message: '不能为空', trigger: 'blur' }],
    carIds: [{ required: true, message: '不能为空', trigger: 'change', type: 'array' }],
    categoryIds: [{ required: true, message: '不能为空', trigger: 'change' }],
    remark: [{ required: true, message: '不能为空', trigger: 'blur' }],
    pageUrlType: [{ required: true, message: '不能为空', trigger: 'blur' }]
})

const editLoading = ref(false)

// const categoryList = [
//   {
//     label: '科目一',
//     value: '1'
//   },
//   {
//     label: '科目二',
//     value: '2'
//   },
//   {
//     label: '科目三',
//     value: '3'
//   },
//   {
//     label: '科目四',
//     value: '4'
//   }
// ]

// 临时指定小程序跳转页面
// const uniAppPageList = [
//   {
//     label: '精选500题',
//     value: '01'
//   },
//   {
//     label: '专项练习',
//     value: '02'
//   },
//   {
//     label: '图标技巧',
//     value: '03'
//   },
//   {
//     label: '考前密卷',
//     value: '04'
//   },
//   {
//     label: '分阶段练习',
//     value: '05'
//   }
// ]

const emit = defineEmits(['closeDialog'])


const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid) => {
        if (valid) {
            if (props.editInfo.id) {
                handleEdit()
            } else {
                handleAdd()
            }
        } else {
        }
    })
}

async function handleAdd() {
    try {
        editLoading.value = true
        form.img = categoryLogo.value
        let remark = JSON.stringify(form.remark)
        const res = await operationCategory.newAddCategory({
            ...form,
            carIds: form.carIds.join(','),
            remark,
            status: form.status
        })
        if (res.code === '00000') {
            emit('closeDialog', true, form.status)
            ElMessage.success('新增成功')
        }
    } catch (e) {
    } finally {
        editLoading.value = false
    }
}

async function handleEdit() {
    try {
        editLoading.value = true
        form.img = categoryLogo.value
        let remark = JSON.stringify(form.remark)
        const res = await operationCategory.eidtCategory(
            {
                name: form.name,
                img: form.img,
                carIds: form.carIds.join(','),
                remark,
                status: form.status
            },
            props.editInfo.id
        )
        if (res.code === '00000') {
            emit('closeDialog', true, form.status)
            ElMessage.success('编辑成功')
        }
    } catch (e) {
    } finally {
        editLoading.value = false
    }
}


const resetForm = () => {
    emit('closeDialog')
}

//车型下拉接口
const getcarmodellistinfo = async () => {
    let obj = {}
    const res = await getcarmodellist.getcarmodelId(obj)
    if (res.code == 0) {
        form.carIds = res.data.map((e: any) => e.value)
    }
}


onMounted(() => {
    if (props.editInfo.id) {
        form.name = props.editInfo.name
        form.img = props.editInfo.img
        form.carIds = props.editInfo.carIds.split(',')
        categoryLogo.value = form.img
        const remarkObj = JSON.parse(props.editInfo.remark || '{}')
        form.remark.type = remarkObj.type || ''
    }

    form.pageUrlType = props.editInfo.pageUrlType
    form.categoryIds = props.editInfo.categoryIds
    form.parentId = props.editInfo.parentId

    getcarmodellistinfo()
})
</script>

<style scoped lang="scss">
.avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;

    .mask {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 24px;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
        color: #fff;
        font-size: 12px;
    }

    .del-image {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        color: #8c939d;
    }

    &:hover .mask {
        opacity: 1;
    }

    &:hover .del-image {
        display: block;
    }
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>